<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 如果一个项目里面， 引用了第三方的css，又有自己的css，自己写的一定要放最后，防止自己的代码被别人覆盖了 -->
    <link rel="stylesheet" href="./assets/lib/layui/css/layui.css" />
    <link rel="stylesheet" href="./assets/css/login.css" />
  </head>
  <body>
    <!-- logo区域 -->
    <div class="login-logo">
      <img src="./assets/images/logo.png" alt="" />
    </div>

    <!-- 登录或者注册区域 -->
    <div class="login-and-registry">
      <!-- 图片标题 -->
      <div class="image-title">
        <img src="./assets/images/login_title.png" alt="" />
      </div>

      <!-- 登录注册区域 -->
      <div class="lar-box">
        <!-- 登录 -->
        <!-- 起类名的方式  zs-login  zs-login-title -->
        <!-- 起类名的方式  ls-login  ls-login-title -->
        <!-- 起的类名  尽量保留一个文件名前缀的位置  login-title  login-box-main -->
        <div class="login-box">
          <form class="layui-form self-form" id="login-form">
            <div class="layui-form-item">
              <!-- 复制代码的时候，先不管样式，先把结构搞定 -->
              <i class="layui-icon layui-icon-username"></i>
              <!-- required 这个属性是 html5 的新增的表单验证的属性，必填的意思 -->
              <!-- lay-verify  是layui提供的表单验证，更好看一些， 但是一定要先引入layui的js文件，才有效果 -->
              <input
                type="text"
                name="username"
                required
                lay-verify="required|username"
                placeholder="请输入用户名"
                autocomplete="off"
                class="layui-input"
              />
            </div>
            <div class="layui-form-item">
              <i class="layui-icon layui-icon-password"></i>
              <input
                type="password"
                name="pwd"
                required
                lay-verify="required|pass"
                placeholder="请输入密码"
                autocomplete="off"
                class="layui-input"
              />
            </div>
            <div class="layui-form-item">
              <button lay-submit class="layui-btn layui-btn-fluid layui-btn-normal" id="btnLogin">
                登录
              </button>
            </div>
            <div class="layui-form-item" style="text-align: right">
              <!-- 在html里面 阻止a标签的默认行为 -->
              <a href="javascript:;" id="goRegistry">去注册账号</a>
            </div>
          </form>
        </div>
        <!-- 注册 -->
        <div class="registry-box">
          <form class="layui-form self-form" id="regitry-form">
            <div class="layui-form-item">
              <i class="layui-icon layui-icon-username"></i>
              <input
                type="text"
                name="username"
                required
                lay-verify="required|username"
                placeholder="请输入用户名"
                autocomplete="off"
                class="layui-input"
              />
            </div>
            <div class="layui-form-item">
              <i class="layui-icon layui-icon-password"></i>
              <input
                type="password"
                name="password"
                required
                lay-verify="required|pass"
                placeholder="请输入密码"
                autocomplete="off"
                class="layui-input"
              />
            </div>
            <div class="layui-form-item">
              <i class="layui-icon layui-icon-password"></i>
              <input
                type="password"
                name="repassword"
                required
                lay-verify="required|repass"
                placeholder="请再次输入密码"
                autocomplete="off"
                class="layui-input"
              />
            </div>
            <div class="layui-form-item">
              <button
                lay-submit
                id="btnRegistry"
                class="layui-btn layui-btn-fluid layui-btn-normal"
              >
                注册
              </button>
            </div>
            <div class="layui-form-item" style="text-align: right">
              <!-- 在html里面 阻止a标签的默认行为 -->
              <a href="javascript:;" id="goLogin">去登录</a>
            </div>
          </form>
        </div>
      </div>
    </div>

    <script src="./assets/lib/jquery.js"></script>
    <script src="./assets/lib/layui/layui.all.js"></script>
    <script src="./assets/js/baseAPI.js"></script>
    <script src="./assets/js/login.js"></script>
  </body>
</html>
